<button class="px-4 py-3 text-left border-[0.5px] flex flex-col rounded-xl p-1 mb-2 bg-gray-50 border-gray-200 enabled:hover:bg-white enabled:shadow-sm disabled:opacity-50
  cursor-default"
  [disabled]="disabled()"
>
  <div class="w-full text-gray-800 font-semibold leading-5 flex items-center">
    <button class="w-6 h-6 rounded-md enabled:hover:bg-hover-bg enabled:cursor-pointer"
      [disabled]="disabled()"
      (click)="toggleExpand()">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
        class="w-6 h-6 text-text-tertiary"
        [ngClass]="{'rotate-180': expand()}">
        <path d="M12 15.0006L7.75732 10.758L9.17154 9.34375L12 12.1722L14.8284 9.34375L16.2426 10.758L12 15.0006Z"></path>
      </svg>
    </button>
    
    <div class="flex-1 truncate">{{tool().identity.label | i18n}}</div>

    <mat-slide-toggle [(ngModel)]="enabled" ngm-density="xs" [disabled]="disabled()" />
  </div>
    
  <div class="mt-1 text-sm leading-[18px] text-gray-500 line-clamp-2" [title]="tool().description.human | i18n">
    {{tool().description.human | i18n}}
  </div>

  @if (expand()) {
    <xpert-tool-builtin-parameters [tool]="tool()" class="p-4 w-full" />
  }

  <div class="w-full flex justify-end">
    <button type="button" class="btn disabled:btn-disabled btn-secondary btn-small space-x-1"
      [disabled]="disabled()"
      (click)="openToolTest(tool())">
      <div class="text-sm font-medium">{{ 'PAC.Xpert.Test' | translate: {Default: 'Test'} }}</div>
    </button>
  </div>
</button>
